<template>
  <div class="groupContainer" v-show="optionGroupShow">
    <div v-for="(data, index) in optionList" :key="index" @click="click">
      {{ data }}
    </div>
  </div>
</template>

<script>
/*eslint-disable */
import pubsub from "pubsub-js";

export default {
  name: "optionGroup",
  data() {
    return {
      optionList: [],
      subList: [],
      optionGroupShow: true,
    };
  },
  mounted() {
    // 楼栋选中
    this.subList[0] = pubsub.subscribe("buildingSelect", () => {
      this.optionList = ["人口信息", "楼栋周边"];
      setTimeout(() => {
        let nodeList = Array.from(
          document.querySelectorAll(".groupContainer>div")
        );
        nodeList[0].style["color"] = "#1296db";
      }, 100);
    });
    // 人口选中
    this.subList[1] = pubsub.subscribe("peopleSelected", () => {
      this.optionList = ["同楼人员", "楼栋周边"];
      setTimeout(() => {
        let nodeList = Array.from(
          document.querySelectorAll(".groupContainer>div")
        );
        nodeList[0].style["color"] = "#1296db";
      }, 100);
    });
    //退出楼栋
    this.subList[2] = pubsub.subscribe("returnFromBuilding", () => {
      this.optionList = [];
    });
    // 隐藏
    this.subList[3] = pubsub.subscribe("FirstPageShow", (n, data) => {
      this.optionGroupShow = false;
      if (data === "@@") {
        this.optionGroupShow = true;
      }
    });
  },
  methods: {
    click() {
      let nodeList = Array.from(
        document.querySelectorAll(".groupContainer>div")
      );
      //   样式更新
      nodeList.forEach((element) => {
        element.style["color"] = "white";
        element.style["font-weight"] = "normal";
      });
      event.target.style["color"] = "#1296db";
      event.target.style["font-weight"] = "bold";
      //   选项卡更新
      pubsub.publish("optionRenew", event.target.innerHTML);
    },
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.groupContainer {
  //   background-color: aliceblue;
  position: absolute;
  z-index: 10000;
  top: 5%;
  right: 18%;
  width: 2.2%;
  height: 94%;
  padding-top: 1%;
  > div {
    padding-bottom: 20%;
    padding-top: 40%;
    margin-bottom: 20%;
    font-size: 120%;
    letter-spacing: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: ~"url(@{app-images-root}/button_bg7.png)";
    background-size: 100% 100%;
    color: white;
    writing-mode: vertical-rl;
  }
}

.groupContainer > div:hover {
  font-weight: bold;
  cursor: pointer;
}
</style>